<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>编辑题目</title>
    <meta name="description" content="Charcoal is a free Bootstrap 4 UI kit build by @attacomsian at Wired Dots." />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--Bootstrap 4-->
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
        .dropbtn {
            background-color: transparent;
            color: white;
            padding-left: 35px;
            padding-right: 35px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        .dropdown {
            position: relative;
            display: inline-block;
            text-align: center;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            width: 100%;;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {
            background-color: #f1f1f1
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .dropdown:hover .dropbtn {
            background-color: transparent;
        }

        /*导航栏样式*/
        .navbar {
            background-color: #222;
        }
        #daohang {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: transparent;
        }
        li {
            float: left;
        }
        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        #submitButton{
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 5px;
            padding-bottom: 5px;
            color: #fff;
            background-color: #5bc0de;
            border: 0;
            border-radius: 8px;
            width: 150px;
        }
        #submitButton:hover{
            background-color: #97d3e7;
        }
        .col-sm-new {
            border-radius: 15px;
            -ms-flex: 0 0 100%;
            flex: 0 0 100%;
            max-width: 100%; }
    </style>
</head>
<body>

<nav class="navbar navbar-expand-md navbar-dark fixed-top sticky-navigation">
    <a class="navbar-brand font-weight-bold" href="manager.html">我的OJ平台——编辑题目</a>
    <div class="collapse navbar-collapse" id="topMenu">
        <ul class="navbar-nav ml-auto" >
            <div style="margin:5px" id="javaoj">
                <a style="color: white" href="login.html" onclick="logout()"> 退出登录</a>
                <div class="dropdown">
                    <button class="dropbtn">设置</button>
                    <div class="dropdown-content">
                        <a href="updateInfo.html">修改个人信息</a>
                        <a href="updatePassword.html">修改密码</a>
                    </div>
                </div>
            </div>
        </ul>
    </div>
</nav>

<!--components-->
<section class="my-5 pt-5">
    <div class="container">
        <div class="row mt-4">
            <div class="col-sm-new pb-4">
                <div class="form-group">
                    <label for="title">标题</label>
                    <textarea class="form-control" id="title" style="width: 100%; height: 50px;"></textarea>
                </div>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col-sm-new pb-4">
                <div class="form-group">
                    <label for="degree">难度</label>
                    <select class="form-control" id="degree" style="width: 100%; height: 40px;">
                        <option value="简单">简单</option>
                        <option value="中等">中等</option>
                        <option value="困难">困难</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col-sm-new pb-4">
                <div class="form-group">
                    <label for="description">题目描述</label>
                    <textarea class="form-control" id="description" style="width: 100%; height: 200px;"></textarea>
                    <label for="inputDescription">输入描述</label>
                    <textarea class="form-control" id="inputDescription" style="width: 100%; height: 100px;"></textarea>
                    <label for="outputDescription">输出描述</label>
                    <textarea class="form-control" id="outputDescription" style="width: 100%; height: 100px;"></textarea>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row mt-4">
                <div class="col-sm-new pb-4">
                    <div class="form-group">
                        <div style="display: inline-block;margin-right: 200px;margin-left: 300px">
                            <label for="memoryLimit">内存限制</label>
                            <div>
                                <textarea class="form-control" id="memoryLimit" style="width: 80px; height: 50px;display: inline-block"></textarea>
                                <p style="float: right;margin-top:5px;margin-left: 20px;font-size: 20px">MB</p>
                            </div>
                        </div>
                        <div style="display: inline-block;margin-right: 200px">
                            <label for="timeLimit">时间限制</label>
                            <div>
                                <textarea class="form-control" id="timeLimit" style="width: 80px; height: 50px;display: inline-block"></textarea>
                                <p style="float: right;margin-top:5px;margin-left: 20px;font-size: 20px">S</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-4">
                <div class="col-sm-new pb-4">
                    <div class="form-group">
                        <div style="display: inline-block;margin-right: 100px">
                            <label for="input1">输入样例1</label>
                            <textarea contenteditable="true" class="form-control" id="input1" style="width: 480px; height: 50px;white-space:pre-wrap"></textarea>
                        </div>
                        <div style="display: inline-block">
                            <label for="output1">输出样例1</label>
                            <textarea class="form-control" id="output1" style="width: 480px; height: 50px;white-space:pre-wrap"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <div style="display: inline-block;margin-right: 100px">
                            <label for="input1">输入样例2</label>
                            <textarea class="form-control" id="input2" style="width: 480px; height: 50px;white-space:pre-wrap"></textarea>
                        </div>
                        <div style="display: inline-block">
                            <label for="output1">输出样例2</label>
                            <textarea class="form-control" id="output2" style="width: 480px; height: 50px;white-space:pre-wrap"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <div style="display: inline-block;margin-right: 100px">
                            <label for="input1">输入样例3</label>
                            <textarea class="form-control" id="input3" style="width: 480px; height: 50px;white-space:pre-wrap"></textarea>
                        </div>
                        <div style="display: inline-block">
                            <label for="output1">输出样例3</label>
                            <textarea class="form-control" id="output3" style="width: 480px; height: 50px;white-space:pre-wrap"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <div style="display: inline-block;margin-right: 100px">
                            <label for="input1">输入样例4</label>
                            <textarea class="form-control" id="input4" style="width: 480px; height: 50px;white-space:pre-wrap"></textarea>
                        </div>
                        <div style="display: inline-block">
                            <label for="output1">输出样例4</label>
                            <textarea class="form-control" id="output4" style="width: 480px; height: 50px;white-space:pre-wrap"></textarea>
                        </div>
                        <div class="form-group">
                            <div style="display: inline-block;margin-right: 100px">
                                <label for="input1">输入样例5</label>
                                <textarea class="form-control" id="input5" style="width: 480px; height: 50px;white-space:pre-wrap"></textarea>
                            </div>
                            <div style="display: inline-block">
                                <label for="output1">输出样例5</label>
                                <textarea class="form-control" id="output5" style="width: 480px; height: 50px;white-space:pre-wrap"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div style="display: inline-block;margin-right: 100px">
                                <label for="input1">输入样例6</label>
                                <textarea class="form-control" id="input6" style="width: 480px; height: 50px;white-space:pre-wrap"></textarea>
                            </div>
                            <div style="display: inline-block">
                                <label for="output1">输出样例6</label>
                                <textarea class="form-control" id="output6" style="width: 480px; height: 50px;white-space:pre-wrap"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div style="display: inline-block;margin-right: 100px">
                                <label for="input1">输入样例7</label>
                                <textarea class="form-control" id="input7" style="width: 480px; height: 50px;white-space:pre-wrap"></textarea>
                            </div>
                            <div style="display: inline-block">
                                <label for="output1">输出样例7</label>
                                <textarea class="form-control" id="output7" style="width: 480px; height: 50px;white-space:pre-wrap"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div style="display: inline-block;margin-right: 100px">
                                <label for="input1">输入样例8</label>
                                <textarea class="form-control" id="input8" style="width: 480px; height: 50px;white-space:pre-wrap"></textarea>
                            </div>
                            <div style="display: inline-block">
                                <label for="output1">输出样例8</label>
                                <textarea class="form-control" id="output8" style="width: 480px; height: 50px;white-space:pre-wrap"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div style="display: inline-block;margin-right: 100px">
                                <label for="input1">输入样例9</label>
                                <textarea class="form-control" id="input9" style="width: 480px; height: 50px;white-space:pre-wrap"></textarea>
                            </div>
                            <div style="display: inline-block">
                                <label for="output1">输出样例9</label>
                                <textarea class="form-control" id="output9" style="width: 480px; height: 50px;white-space:pre-wrap"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div style="display: inline-block;margin-right: 100px">
                                <label for="input1">输入样例10</label>
                                <textarea class="form-control" id="input10" style="width: 480px; height: 50px;white-space:pre-wrap"></textarea>
                            </div>
                            <div style="display: inline-block">
                                <label for="output1">输出样例10</label>
                                <textarea class="form-control" id="output10" style="width: 480px; height: 50px;white-space:pre-wrap"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="float:right"><button type="button" class="btn btn-primary" id="submitButton">修改</button></div>
        </div>
    </div>
</section>
<!--footer-->
<section class="py-5 bg-dark">
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-md-3 col-sm-8 offset-sm-2 col-xs-12 text-center">
                <p class="pt-2 text-muted">
                    &copy; by <a href="aboutUs.html" target="_blank">别叫我们组</a>
                </p>
            </div>
        </div>
    </div>
</section>
<script src="js/jquery.min.js"></script>
<script>
    var userId=localStorage.getItem("userId");
    getUser();
    function getUser(){
        if (userId==null){
            location.assign("login.html");
        }
    }
    function logout(){
        localStorage.clear();
    }

    //根据元素id获取元素
    var title = document.getElementById("title");
    var description = document.getElementById("description");
    var inputDescription = document.getElementById("inputDescription");
    var outputDescription = document.getElementById("outputDescription");
    var memoryLimit = document.getElementById("memoryLimit");
    var timeLimit = document.getElementById("timeLimit");
    var input1 = document.getElementById("input1");
    var input2 = document.getElementById("input2");
    var input3 = document.getElementById("input3");
    var input4 = document.getElementById("input4");
    var input5 = document.getElementById("input5");
    var input6 = document.getElementById("input6");
    var input7 = document.getElementById("input7");
    var input8 = document.getElementById("input8");
    var input9 = document.getElementById("input9");
    var input10 = document.getElementById("input10");
    var output1 = document.getElementById("output1");
    var output2 = document.getElementById("output2");
    var output3 = document.getElementById("output3");
    var output4 = document.getElementById("output4");
    var output5 = document.getElementById("output5");
    var output6 = document.getElementById("output6");
    var output7 = document.getElementById("output7");
    var output8 = document.getElementById("output8");
    var output9 = document.getElementById("output9");
    var output10 = document.getElementById("output10");
    var degree = document.getElementById("degree");

    // 解析地址，获取questionId参数
    function getQueryString(value) {
        const reg = new RegExp("(^|&)" + value + "=([^&]*)(&|$)", "i");
        const r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }
    const questionId = getQueryString("questionId");

    //根据题目id查询题目详情并放到页面上
    function getQuestionDetail(){
        $.ajax({
            url:"http://localhost:8020/question/findQuestion/"+questionId,
            success:function (result){
                title.innerText=result.data.title;
                description.innerText=result.data.description;
                inputDescription.innerText=result.data.inputDescription;
                outputDescription.innerText=result.data.outputDescription;
                memoryLimit.innerText=result.data.memoryLimit;
                timeLimit.innerText=result.data.timeLimit;
                //将从数据库获取的json字符串转为对象
                var inputObj = JSON.parse(result.data.inputList);
                var outputObj = JSON.parse(result.data.outputList);
                input1.innerText=inputObj.input1;
                input2.innerText=inputObj.input2;
                input3.innerText=inputObj.input3;
                input4.innerText=inputObj.input4;
                input5.innerText=inputObj.input5;
                input6.innerText=inputObj.input6;
                input7.innerText=inputObj.input7;
                input8.innerText=inputObj.input8;
                input9.innerText=inputObj.input9;
                input10.innerText=inputObj.input10;
                output1.innerText=outputObj.output1;
                output2.innerText=outputObj.output2;
                output3.innerText=outputObj.output3;
                output4.innerText=outputObj.output4;
                output5.innerText=outputObj.output5;
                output6.innerText=outputObj.output6;
                output7.innerText=outputObj.output7;
                output8.innerText=outputObj.output8;
                output9.innerText=outputObj.output9;
                output10.innerText=outputObj.output10;
                //难度下拉框
                $("#degree").val(result.data.degree);
            }
        })
    }
    getQuestionDetail();

    //点击修改按钮执行的操作
    let button=document.querySelector("#submitButton");
    button.onclick=function(){
        let inputList = {
            "input1":$("#input1").val(),
            "input2":$("#input2").val(),
            "input3":$("#input3").val(),
            "input4":$("#input4").val(),
            "input5":$("#input5").val(),
            "input6":$("#input6").val(),
            "input7":$("#input7").val(),
            "input8":$("#input8").val(),
            "input9":$("#input9").val(),
            "input10":$("#input10").val(),
        }
        let outputList = {
            "output1":$("#output1").val(),
            "output2":$("#output2").val(),
            "output3":$("#output3").val(),
            "output4":$("#output4").val(),
            "output5":$("#output5").val(),
            "output6":$("#output6").val(),
            "output7":$("#output7").val(),
            "output8":$("#output8").val(),
            "output9":$("#output9").val(),
            "output10":$("#output10").val(),
        }
        let question={
            "id":questionId,
            "title" : $("#title").val(),
            "description": $("#description").val(),
            "inputDescription":$("#inputDescription").val(),
            "outputDescription":$("#outputDescription").val(),
            "memoryLimit":$("#memoryLimit").val(),
            "timeLimit":$("#timeLimit").val(),
            "inputList":JSON.stringify(inputList),
            "outputList":JSON.stringify(outputList),
            //难度
            "degree": $("#degree").val(),
        };
        $.ajax({
            url:"http://192.168.47.129:8010/admin/updateQuestion",
            type:"POST",
            contentType:"application/json; charset=utf-8",
            data: JSON.stringify(question),
            success:function(data,status){
                location.assign("manageQuestion.html");
            }
        })
    }

</script>
</body>
</html>
